CSS में महारत हासिल करना: @property के साथ कस्टम प्रॉपर्टी रजिस्ट्रेशन

कस्टम प्रॉपर्टीज़ (जिन्हें CSS वेरिएबल्स के रूप में भी जाना जाता है) ने हमारे CSS लिखने और बनाए रखने के तरीके में क्रांति ला दी है। वे हमें पुन: प्रयोज्य वैल्यूज़ को परिभाषित करने की अनुमति देते हैं, जिससे हमारी स्टाइलशीट अधिक लचीली और बनाए रखने योग्य हो जाती हैं। लेकिन क्या होगा यदि आप केवल वैल्यूज़ को परिभाषित करने से आगे बढ़ सकें? क्या होगा यदि आप कस्टम प्रॉपर्टी द्वारा होल्ड किए गए वैल्यू के प्रकार को, साथ ही इसके प्रारंभिक वैल्यू और इनहेरिटेंस व्यवहार को परिभाषित कर सकें? वहीं @property काम आती है।

@property क्या है?

@property एक CSS एट-रूल है जो आपको ब्राउज़र के साथ कस्टम प्रॉपर्टी को स्पष्ट रूप से रजिस्टर करने की अनुमति देता है। यह रजिस्ट्रेशन प्रक्रिया ब्राउज़र को प्रॉपर्टी के अपेक्षित प्रकार, इसके प्रारंभिक वैल्यू और क्या इसे अपने पैरेंट एलिमेंट से इनहेरिट करना चाहिए, के बारे में जानकारी प्रदान करती है। यह कई उन्नत क्षमताओं को अनलॉक करता है, जिनमें शामिल हैं:

• टाइप चेकिंग: यह सुनिश्चित करता है कि कस्टम प्रॉपर्टी को सही प्रकार का वैल्यू असाइन किया गया है।
• एनीमेशन: नंबर या रंग जैसे विशिष्ट प्रकारों की कस्टम प्रॉपर्टीज़ के लिए सहज ट्रांज़िशन और एनिमेशन सक्षम करता है।
• डिफ़ॉल्ट वैल्यूज़: यदि कस्टम प्रॉपर्टी स्पष्ट रूप से परिभाषित नहीं है तो एक फ़ॉलबैक वैल्यू प्रदान करता है।
• इनहेरिटेंस कंट्रोल: यह निर्धारित करता है कि कस्टम प्रॉपर्टी अपने पैरेंट एलिमेंट से अपना वैल्यू इनहेरिट करती है या नहीं।

इसे अपने CSS वेरिएबल्स में टाइप सेफ्टी जोड़ने के रूप में सोचें। यह आपको अधिक मजबूत और अनुमानित स्टाइलशीट बनाने की अनुमति देता है।

@property का सिंटैक्स

@property नियम इस बुनियादी सिंटैक्स का पालन करता है:

@property --property-name {
  syntax: '';
  inherits: true | false;
  initial-value: <value>;
}

आइए प्रत्येक भाग को तोड़ते हैं:

• --property-name: कस्टम प्रॉपर्टी का नाम जिसे आप रजिस्टर करना चाहते हैं। यह दो हाइफ़न (--) से शुरू होना चाहिए।
• syntax: प्रॉपर्टी के लिए वैल्यू के अपेक्षित प्रकार को परिभाषित करता है। यह टाइप चेकिंग और एनीमेशन के लिए महत्वपूर्ण है। हम नीचे उपलब्ध सिंटैक्स वैल्यूज़ को विस्तार से जानेंगे।
• inherits: एक बूलियन वैल्यू जो इंगित करता है कि प्रॉपर्टी को अपने पैरेंट एलिमेंट से इनहेरिट करना चाहिए या नहीं। यदि निर्दिष्ट नहीं है तो डिफ़ॉल्ट रूप से false होता है।
• initial-value: प्रॉपर्टी के लिए डिफ़ॉल्ट वैल्यू यदि यह किसी एलिमेंट पर स्पष्ट रूप से सेट नहीं है। यह सुनिश्चित करता है कि फ़ॉलबैक वैल्यू हमेशा उपलब्ध हो।

syntax डिस्क्रिप्टर को समझना

syntax डिस्क्रिप्टर @property नियम का सबसे महत्वपूर्ण हिस्सा है। यह ब्राउज़र को बताता है कि कस्टम प्रॉपर्टी के लिए किस प्रकार के वैल्यू की अपेक्षा करनी है। यहां कुछ सामान्य सिंटैक्स वैल्यूज़ दी गई हैं:

• *: किसी भी वैल्यू की अनुमति देता है। यह सबसे परमिटिव सिंटैक्स है और अनिवार्य रूप से बिना रजिस्ट्रेशन के एक मानक CSS वेरिएबल के व्यवहार को दोहराता है। इसका उपयोग कम ही करें।
• <length>: एक लंबाई वैल्यू की अपेक्षा करता है (उदाहरण के लिए, 10px, 2em, 50%)। यह विभिन्न लंबाई वैल्यूज़ के बीच सहज एनिमेशन को सक्षम करता है।
• <number>: एक न्यूमेरिक वैल्यू की अपेक्षा करता है (उदाहरण के लिए, 1, 3.14, -5)। अपारदर्शिता या स्केल जैसी न्यूमेरिक प्रॉपर्टीज़ को एनिमेट करने के लिए उपयोगी है।
• <percentage>: एक प्रतिशत वैल्यू की अपेक्षा करता है (उदाहरण के लिए, 25%, 100%)।
• <color>: एक रंग वैल्यू की अपेक्षा करता है (उदाहरण के लिए, #f00, rgb(255, 0, 0), hsl(0, 100%, 50%))। सहज रंग ट्रांज़िशन और एनिमेशन सक्षम करता है।
• <image>: एक इमेज वैल्यू की अपेक्षा करता है (उदाहरण के लिए, url(image.jpg), linear-gradient(...))।
• <integer>: एक पूर्णांक वैल्यू की अपेक्षा करता है (उदाहरण के लिए, 1, -10, 0)।
• <angle>: एक कोण वैल्यू की अपेक्षा करता है (उदाहरण के लिए, 45deg, 0.5rad, 200grad)। रोटेशन को एनिमेट करने के लिए उपयोगी है।
• <time>: एक समय वैल्यू की अपेक्षा करता है (उदाहरण के लिए, 1s, 500ms)। कस्टम प्रॉपर्टीज़ के माध्यम से एनीमेशन ड्यूरेशन या देरी को नियंत्रित करने के लिए उपयोगी है।
• <resolution>: एक रिज़ॉल्यूशन वैल्यू की अपेक्षा करता है (उदाहरण के लिए, 300dpi, 96dpi)।
• <transform-list>: ट्रांसफ़ॉर्म फ़ंक्शन की एक सूची की अपेक्षा करता है (उदाहरण के लिए, translateX(10px) rotate(45deg))। जटिल ट्रांसफ़ॉर्मेशन को एनिमेट करने की अनुमति देता है।
• <custom-ident>: एक कस्टम आइडेंटिफ़ायर (एक स्ट्रिंग) की अपेक्षा करता है। एक enum के समान।
• <string>: एक स्ट्रिंग वैल्यू की अपेक्षा करता है (उदाहरण के लिए, "Hello World")। इससे सावधान रहें, क्योंकि आम तौर पर स्ट्रिंग को एनिमेट करना समर्थित नहीं है।
• कस्टम सिंटैक्स: आप उपरोक्त और | (या), `[]` (समूहीकरण), `+` (एक या अधिक), `*` (शून्य या अधिक), और `?` (शून्य या एक) ऑपरेटरों के संयोजन का उपयोग करके अधिक जटिल सिंटैक्स बना सकते हैं। उदाहरण के लिए: <length> | <percentage> या तो लंबाई या प्रतिशत वैल्यू की अनुमति देता है।

@property की पूरी शक्ति का लाभ उठाने के लिए सही syntax का चयन करना आवश्यक है।

@property के व्यावहारिक उदाहरण

आइए अपने CSS में @property का उपयोग करने के कुछ व्यावहारिक उदाहरणों पर गौर करें।

उदाहरण 1: बैकग्राउंड रंग को एनिमेट करना

मान लीजिए कि आप किसी बटन के बैकग्राउंड रंग को एनिमेट करना चाहते हैं। आप बैकग्राउंड रंग के लिए कस्टम प्रॉपर्टी रजिस्टर करने के लिए @property का उपयोग कर सकते हैं और फिर CSS ट्रांज़िशन का उपयोग करके इसे एनिमेट कर सकते हैं।

@property --bg-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

.button {
  background-color: var(--bg-color);
  transition: --bg-color 0.3s ease;
}

.button:hover {
  --bg-color: #f00; /* Red */
}

इस उदाहरण में, हम --bg-color कस्टम प्रॉपर्टी को <color> सिंटैक्स के साथ रजिस्टर करते हैं, जिसका अर्थ है कि यह एक रंग वैल्यू की अपेक्षा करता है। initial-value को सफेद (#fff) पर सेट किया गया है। जब बटन पर होवर किया जाता है, तो --bg-color बदलकर लाल (#f00) हो जाता है, और ट्रांज़िशन बैकग्राउंड रंग परिवर्तन को सुचारू रूप से एनिमेट करता है।

उदाहरण 2: एक नंबर के साथ बॉर्डर रेडियस को नियंत्रित करना

आप किसी एलिमेंट के बॉर्डर रेडियस को नियंत्रित करने और उसे एनिमेट करने के लिए @property का उपयोग कर सकते हैं।

@property --border-radius {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.rounded-box {
  border-radius: var(--border-radius);
  transition: --border-radius 0.5s ease;
}

.rounded-box:hover {
  --border-radius: 20px;
}

यहां, हम --border-radius को <length> के रूप में रजिस्टर करते हैं, यह सुनिश्चित करते हुए कि यह px, em, या % जैसी लंबाई वैल्यूज़ स्वीकार करता है। प्रारंभिक वैल्यू 0px है। .rounded-box पर होवर करने पर, बॉर्डर रेडियस 20px तक एनिमेट हो जाता है।

उदाहरण 3: एक शैडो ऑफ़सेट को एनिमेट करना

मान लीजिए कि आप एक बॉक्स शैडो के क्षैतिज ऑफ़सेट को एनिमेट करना चाहते हैं।

@property --shadow-offset-x {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.shadowed-box {
  box-shadow: var(--shadow-offset-x) 5px 10px rgba(0, 0, 0, 0.5);
  transition: --shadow-offset-x 0.3s ease;
}

.shadowed-box:hover {
  --shadow-offset-x: 10px;
}

इस मामले में, --shadow-offset-x को <length> के रूप में रजिस्टर किया गया है, और इसका प्रारंभिक वैल्यू 0px है। box-shadow प्रॉपर्टी अपने क्षैतिज ऑफ़सेट के लिए इस कस्टम प्रॉपर्टी का उपयोग करती है। होवर पर, ऑफ़सेट 10px तक एनिमेट हो जाता है।

उदाहरण 4: थीमिंग के लिए <custom-ident> का उपयोग करना

<custom-ident> सिंटैक्स आपको पूर्वनिर्धारित स्ट्रिंग वैल्यूज़ का एक सेट परिभाषित करने की अनुमति देता है, जो प्रभावी रूप से आपके CSS वेरिएबल्स के लिए एक enum बनाता है। यह थीमिंग या अलग-अलग राज्यों को नियंत्रित करने के लिए उपयोगी है।

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light; /* डिफ़ॉल्ट थीम */
}

body {
  background-color: var(--theme) == light ? #fff : #333;
  color: var(--theme) == light ? #000 : #fff;
}

.dark-theme {
  --theme: dark;
}

यहां, --theme को <custom-ident> सिंटैक्स के साथ रजिस्टर किया गया है। हालांकि हम स्पष्ट रूप से @property नियम में ही अनुमत आइडेंटिफ़ायर की सूची नहीं बनाते हैं, लेकिन कोड का तात्पर्य है कि वे `light` और `dark` हैं। CSS तब वर्तमान थीम के आधार पर अलग-अलग स्टाइल लागू करने के लिए कंडीशनल लॉजिक (var(--theme) == light ? ... : ...) का उपयोग करता है। किसी एलिमेंट में क्लास `dark-theme` जोड़ने से थीम डार्क में बदल जाएगी। ध्यान दें कि `var()` का उपयोग करके कंडीशनल लॉजिक मानक CSS नहीं है और इसके लिए अक्सर प्रीप्रोसेसर या जावास्क्रिप्ट की आवश्यकता होती है। एक अधिक मानक दृष्टिकोण CSS क्लास और कैस्केडिंग का उपयोग करेगा:

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light;
}

body {
  background-color: #fff;
  color: #000;
}

body[data-theme="dark"] {
  background-color: #333;
  color: #fff;
}

/* जावास्क्रिप्ट थीम को टॉगल करने के लिए */
/* document.body.setAttribute('data-theme', 'dark'); */

इस संशोधित उदाहरण में, हम थीम को नियंत्रित करने के लिए body एलिमेंट पर एक data-theme एट्रिब्यूट का उपयोग करते हैं। जावास्क्रिप्ट (टिप्पणी की गई) का उपयोग एट्रिब्यूट को `light` और `dark` के बीच टॉगल करने के लिए किया जाएगा। यह CSS वेरिएबल्स के साथ थीमिंग के लिए एक अधिक मजबूत और मानक दृष्टिकोण है।

@property का उपयोग करने के लाभ

@property का उपयोग करने से कई लाभ मिलते हैं:

• बेहतर कोड पठनीयता और रखरखाव: कस्टम प्रॉपर्टी के लिए वैल्यू के अपेक्षित प्रकार को स्पष्ट रूप से परिभाषित करके, आप अपने कोड को अधिक समझने योग्य और त्रुटियों की संभावना कम कर देते हैं।
• बढ़ी हुई एनीमेशन क्षमताएं: @property कस्टम प्रॉपर्टीज़ के लिए सहज ट्रांज़िशन और एनिमेशन को सक्षम करता है, जिससे गतिशील और आकर्षक यूजर इंटरफेस बनाने की नई संभावनाएं खुलती हैं।
• बेहतर प्रदर्शन: ब्राउज़र रजिस्टर्ड कस्टम प्रॉपर्टीज़ का उपयोग करके एलिमेंट्स के रेंडरिंग को अनुकूलित कर सकते हैं, जिससे प्रदर्शन में सुधार होता है।
• टाइप सेफ्टी: ब्राउज़र यह मान्य करता है कि असाइन किया गया वैल्यू घोषित सिंटैक्स से मेल खाता है, अप्रत्याशित व्यवहार को रोकता है और डिबगिंग को आसान बनाता है। यह विशेष रूप से बड़ी परियोजनाओं में उपयोगी है जहां कई डेवलपर कोडबेस में योगदान कर रहे हैं।
• डिफ़ॉल्ट वैल्यूज़: यह सुनिश्चित करना कि कस्टम प्रॉपर्टी में हमेशा एक मान्य वैल्यू होता है, भले ही यह स्पष्ट रूप से सेट न हो, त्रुटियों को रोकता है और आपके CSS की मजबूती में सुधार करता है।

ब्राउज़र अनुकूलता

2023 के अंत तक, @property का ब्राउज़र सपोर्ट अच्छा है, लेकिन यूनिवर्सल नहीं है। यह Chrome, Firefox, Safari और Edge सहित अधिकांश आधुनिक ब्राउज़रों में समर्थित है। हालांकि, पुराने ब्राउज़र इसका समर्थन नहीं कर सकते हैं। प्रोडक्शन में @property का उपयोग करने से पहले हमेशा Can I use... जैसी वेबसाइटों पर नवीनतम ब्राउज़र अनुकूलता जानकारी जांचें।

पुराने ब्राउज़रों को संभालने के लिए, आप फ़ीचर क्वेरीज़ (@supports) का उपयोग करके फ़ॉलबैक स्टाइल प्रदान कर सकते हैं:

@supports (--property: value) {
  /* स्टाइल जो @property का उपयोग करते हैं */
}

@supports not (--property: value) {
  /* ब्राउज़रों के लिए फ़ॉलबैक स्टाइल जो @property का समर्थन नहीं करते हैं */
}

--property और value को एक वास्तविक कस्टम प्रॉपर्टी और उसके वैल्यू से बदलें।

@property का उपयोग कब करें

निम्नलिखित परिदृश्यों में @property का उपयोग करने पर विचार करें:

• जब आपको कस्टम प्रॉपर्टीज़ को एनिमेट करने की आवश्यकता हो: यह @property का प्राथमिक उपयोग मामला है। सही सिंटैक्स के साथ प्रॉपर्टी रजिस्टर करने से सहज एनिमेशन सक्षम होते हैं।
• जब आप कस्टम प्रॉपर्टीज़ के लिए टाइप सेफ्टी लागू करना चाहते हैं: यदि आप यह सुनिश्चित करना चाहते हैं कि कस्टम प्रॉपर्टी हमेशा एक विशिष्ट प्रकार का वैल्यू होल्ड करती है, तो इसे रजिस्टर करने के लिए @property का उपयोग करें।
• जब आप कस्टम प्रॉपर्टी के लिए डिफ़ॉल्ट वैल्यू प्रदान करना चाहते हैं: initial-value डिस्क्रिप्टर आपको फ़ॉलबैक वैल्यू निर्दिष्ट करने की अनुमति देता है।
• बड़ी परियोजनाओं में: @property कोड रखरखाव को बढ़ाता है और त्रुटियों को रोकता है, जिससे यह कई डेवलपर्स वाली बड़ी परियोजनाओं के लिए विशेष रूप से फायदेमंद है।
• पुन: प्रयोज्य कंपोनेंट्स या डिज़ाइन सिस्टम बनाते समय: @property आपके कंपोनेंट्स में संगति और भविष्यवाणी सुनिश्चित करने में मदद कर सकता है।

बचने के लिए सामान्य गलतियाँ

• syntax डिस्क्रिप्टर को भूलना: syntax डिस्क्रिप्टर के बिना, ब्राउज़र को वैल्यू के अपेक्षित प्रकार का पता नहीं चलेगा, और एनिमेशन सही ढंग से काम नहीं करेंगे।
• गलत syntax वैल्यू का उपयोग करना: गलत सिंटैक्स चुनने से अप्रत्याशित व्यवहार हो सकता है। यह सुनिश्चित करें कि आप उस सिंटैक्स का चयन करें जो वैल्यू के अपेक्षित प्रकार को सटीक रूप से दर्शाता है।
• initial-value प्रदान नहीं करना: प्रारंभिक वैल्यू के बिना, कस्टम प्रॉपर्टी अपरिभाषित हो सकती है, जिससे त्रुटियां हो सकती हैं। हमेशा एक उचित डिफ़ॉल्ट वैल्यू प्रदान करें।
• सिंटैक्स के रूप में * का अधिक उपयोग करना: सुविधाजनक होने पर, * का उपयोग करने से टाइप चेकिंग और एनीमेशन के लाभों का विरोध होता है। इसका उपयोग केवल तभी करें जब आपको वास्तव में किसी भी प्रकार के वैल्यू की अनुमति देने की आवश्यकता हो।
• ब्राउज़र अनुकूलता को अनदेखा करना: हमेशा ब्राउज़र अनुकूलता की जांच करें और पुराने ब्राउज़रों के लिए फ़ॉलबैक स्टाइल प्रदान करें।

@property और CSS हौडिनी

@property APIs के एक बड़े सेट का हिस्सा है जिसे CSS Houdini कहा जाता है। Houdini डेवलपर्स को ब्राउज़र के रेंडरिंग इंजन में टैप करने की अनुमति देता है, जिससे उन्हें स्टाइलिंग और लेआउट प्रक्रिया पर अभूतपूर्व नियंत्रण मिलता है। अन्य Houdini APIs में शामिल हैं:

• Paint API: आपको कस्टम बैकग्राउंड इमेज और बॉर्डर परिभाषित करने की अनुमति देता है।
• Animation Worklet API: उच्च-प्रदर्शन एनिमेशन बनाने का एक तरीका प्रदान करता है जो सीधे ब्राउज़र के कंपोजिटर थ्रेड में चलता है।
• Layout API: आपको कस्टम लेआउट एल्गोरिदम परिभाषित करने में सक्षम बनाता है।
• Parser API: ब्राउज़र के CSS पार्सर तक पहुंच प्रदान करता है।

@property सीखना अपेक्षाकृत सरल Houdini API है, लेकिन यह अधिक उन्नत Houdini सुविधाओं की खोज के लिए द्वार खोलता है।

निष्कर्ष

@property एक शक्तिशाली CSS एट-रूल है जो कस्टम प्रॉपर्टीज़ के लिए उन्नत क्षमताओं को अनलॉक करता है। ब्राउज़र के साथ कस्टम प्रॉपर्टीज़ को रजिस्टर करके, आप टाइप सेफ्टी लागू कर सकते हैं, सहज एनिमेशन सक्षम कर सकते हैं और अपने CSS कोड की समग्र मजबूती में सुधार कर सकते हैं। जबकि ब्राउज़र सपोर्ट यूनिवर्सल नहीं है, @property का उपयोग करने के लाभ, विशेष रूप से बड़ी परियोजनाओं और डिज़ाइन सिस्टम में, इसे आधुनिक वेब डेवलपमेंट के लिए एक मूल्यवान उपकरण बनाते हैं। @property को अपनाएं और अपने CSS कौशल को अगले स्तर पर ले जाएं!